<template>
	<view class="videoList">
		<view class="list-box">
			<view class="list-item" v-for="item in list" :key="item.id">
				<view class="title">{{item.tile}}</view>
				<view class="video-box">
					<video :src="item.url"></video>
				</view>
				<view class="bottom">
					<text>{{item.playCount}}次播放</text>
					<view class="share-box" @tap="share(item)">
						<image src="https://ywtmp.hnwytkj.com/static/images/share.png" mode=""></image>
						<button open-type="share"></button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="list.length < 10" class="btn" @tap="goUpload">上传视频</view>
	</view>
</template>

<script>
import http from '@/utils/http.js'
export default {
	data() {
		return {
		  value: '',
		  params: {
			pageSize: 10,
			pageNo: 1,
		  },
		  info: {},
		  list: [],
		  total: 0,
		  loading: false,
		  isEnd: false,
		  refresh: false,
		  userId: '',
		  id: ''
		}
	},
	onLoad() {
		this.userId = uni.getStorageSync('userId')
	},
	onShow() {
		this.refresh = true
		this.params.pageNo = 1
		this.getData()
		this.getUserData()
	},
	methods: {
		loadMore() {
		  if (this.loading || this.isEnd) return;			  
		  this.params.pageNo++;
		  this.getData();
		},
		goUpload() {
			uni.navigateTo({
				url: '/pagesA/my/uploadVideo'
			})
		},
		getUserData() {
			const token = uni.getStorageSync('token');
			if (token) {
				http({
					url: 'card/user-profile/get'
				}).then(res => {				
					if(res.code === 0) {
						this.info = {
							...res.data
						}
					}
				})
			}			
		},
		getData() {
			this.loading = true;
			http({
				url: 'card/visitor/video/page',
				data: {
					...this.params,
					userId: uni.getStorageSync('userId')
				}
			}).then(res => {
				this.loading = false;
				if(res.code === 0) {
					if (this.refresh) {
						this.list = []
					}
					this.list = this.list.concat(res.data.list)
					this.total = res.data.total
					if (this.list.length >= this.total) {
						this.isEnd = true
					}
				}
			})		
		},
		share(item) {
			this.id = item.id
		},
		saveShare() {
			http({
				url: 'card/user-profile/like/update',
				method: 'put',
				data: {
					userId: uni.getStorageSync('userId'),
					type: 1
				}
			})
		}
	},
	onReachBottom() {
	    // 触发加载更多逻辑
	    this.loadMore();
	},
	onShareAppMessage() {
		// const userId = this.userId
		this.saveShare()
		const promise = new Promise(resolve => {
		      setTimeout(() => {
		        resolve({
		          title: '视频分享',
				  path: `pagesA/share/video?id=${this.id}&userId=${this.userId}&encrypted=${this.info.userProfileDO.level}`,
				  imageUrl: '' 
		        })
		      }, 500)
		    })
		return {
		  title: '视频分享',
		  path: `pagesA/share/video?id=${this.id}&userId=${this.userId}&encrypted=${this.info.userProfileDO.level}`,
		  imageUrl: '',
		  promise
		}
	},
	// onShareTimeline() {
	// 	return {
	// 	  title: '自定义转发标题',
	// 	  query: 'id=123',
	// 	  imageUrl: '' 
	// 	}
	// },
}
</script>

<style lang="scss" scoped>
.videoList {
	min-height: 100vh;
	background-color: #F0F0F4;
	padding: 20rpx;
	box-sizing: border-box;
	font-family: PingFang SC;
	.list-box {
		.list-item {
			min-height: 455rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			margin-bottom: 20rpx;
			padding: 40rpx;
			box-sizing: border-box;
			.title {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 30rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.video-box {
				height: 261rpx;
				background: #E7E7E7;
				border-radius: 20rpx;
				overflow: hidden;
				video {
					width: 100%;
					height: 100%;
				}
			}
			.bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				font-weight: 500;
				font-size: 22rpx;
				color: #999999;
				.share-box {
					position: relative;
					image {
						width: 40rpx;
						height: 40rpx;
					}
					button {
						position: absolute;
						top: 0;
						left: 0;
						width: 40rpx;
						height: 40rpx;
						opacity: 0;
					}
				}				
			}
		}
	}
	.btn {
		width: 300rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		background: #4B73FF;
		box-shadow: 0px 10rpx 18rpx 2rpx rgba(75,115,255,0.3);
		border-radius: 20rpx;		
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		position: fixed;
		left: 50%;
		bottom: calc(50rpx + var(--safe-area-inset-bottom));
		transform: translateX(-50%);
	}
}
</style>